{/* Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import styles from '@react-spectrum/docs/src/docs.css';

import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
import ComboBoxAnatomy from '../assets/component-illustrations/ComboBox.svg';
import SelectAnatomy from '../assets/component-illustrations/Picker.svg';
import Button from '../assets/component-illustrations/Button.svg';
import ToggleButton from '../assets/component-illustrations/ToggleButton.svg';
import ToggleButtonGroup from '../assets/component-illustrations/ActionGroup.svg';
import Checkbox from '../assets/component-illustrations/Checkbox.svg';
import CheckboxGroup from '../assets/component-illustrations/CheckboxGroup.svg';
import RadioGroup from '../assets/component-illustrations/RadioGroup.svg';
import Switch from '../assets/component-illustrations/Switch.svg';
import TextField from '../assets/component-illustrations/TextField.svg';
import NumberField from '../assets/component-illustrations/NumberField.svg';
import SearchField from '../assets/component-illustrations/SearchField.svg';
import Meter from '../assets/component-illustrations/Meter.svg';
import ProgressBar from '../assets/component-illustrations/ProgressCircle.svg';
import Tabs from '../assets/component-illustrations/Tabs.svg';
import Link from '../assets/component-illustrations/Link.svg';
import Breadcrumbs from '../assets/component-illustrations/Breadcrumbs.svg';
import Slider from '../assets/component-illustrations/Slider.svg';
import Dialog from '../assets/component-illustrations/Dialog.svg';
import Tooltip from '../assets/component-illustrations/Tooltip.svg';
import Popover from '../assets/component-illustrations/Popover.svg';
import Menu from '../assets/component-illustrations/Menu.svg';
import ListBox from '../assets/component-illustrations/ListBox.svg';
import ListView from '../assets/component-illustrations/ListView.svg';
import Table from '../assets/component-illustrations/Table.svg';
import Tree from '../assets/component-illustrations/Tree.svg';
import Calendar from '../assets/component-illustrations/Calendar.svg';
import RangeCalendar from '../assets/component-illustrations/RangeCalendar.svg';
import DateField from '../assets/component-illustrations/DateField.svg';
import TimeField from '../assets/component-illustrations/TimeField.svg';
import DatePicker from '../assets/component-illustrations/DatePicker.svg';
import DateRangePicker from '../assets/component-illustrations/DateRangePicker.svg';
import Press from '../assets/component-illustrations/usePress.svg';
import LongPress from '../assets/component-illustrations/useLongPress.svg';
import Hover from '../assets/component-illustrations/useHover.svg';
import Move from '../assets/component-illustrations/useMove.svg';
import Keyboard from '../assets/component-illustrations/useKeyboard.svg';
import FocusRing from '../assets/component-illustrations/useFocusRing.svg';
import FocusScope from '../assets/component-illustrations/FocusScope.svg';
import FocusWithin from '../assets/component-illustrations/useFocusWithin.svg';
import Focus from '../assets/component-illustrations/useFocus.svg';
import TagGroup from '../assets/component-illustrations/TagGroup.svg';
import DropZone from '../assets/component-illustrations/DropZone.svg';
import FileTrigger from '../assets/component-illustrations/FileTrigger.svg'
import Form from '../assets/component-illustrations/Form.svg';
import ColorSlider from '../assets/component-illustrations/ColorSlider.svg';
import ColorWheel from '../assets/component-illustrations/ColorWheel.svg';
import ColorArea from '../assets/component-illustrations/ColorArea.svg';
import ColorField from '../assets/component-illustrations/ColorField.svg';
import ColorSwatch from '../assets/component-illustrations/ColorSwatch.svg';
import ColorSwatchPicker from '../assets/component-illustrations/ColorSwatchPicker.svg';
import ColorPicker from '../assets/component-illustrations/ColorPicker.svg';
import Disclosure from '../assets/component-illustrations/Disclosure.svg';
import DisclosureGroup from '../assets/component-illustrations/DisclosureGroup.svg';
import Toast from '../assets/component-illustrations/Toast.svg';

---
category: Introduction
navigationTitle: Components
description: Craft world-class accessible components with custom styles.
order: 5
---

# React Aria Components

## Buttons

<section className={styles.cardGroup}>

<ExampleCard
  url="Button.html"
  title="Button"
  description="A button allows a user to perform an action with a mouse, touch, or keyboard.">
  <Button />
</ExampleCard>

<ExampleCard
  url="ToggleButton.html"
  title="ToggleButton"
  description="A toggle button allows a user to toggle between two states.">
  <ToggleButton />
</ExampleCard>

<ExampleCard
  url="ToggleButtonGroup.html"
  title="ToggleButtonGroup"
  description="A toggle button group allows a user to toggle multiple options, with single or multiple selection.">
  <ToggleButtonGroup />
</ExampleCard>

<ExampleCard
  url="FileTrigger.html"
  title="FileTrigger"
  description="A file trigger allows a user to access the file system with a Button.">
  <FileTrigger />
</ExampleCard>

</section>

## Pickers

<section className={styles.cardGroup}>

<ExampleCard
  url="ComboBox.html"
  title="ComboBox"
  description="A combobox combines a text input with a listbox, and allows a user to filter a list of options.">
  <ComboBoxAnatomy />
</ExampleCard>

<ExampleCard
  url="Select.html"
  title="Select"
  description="A select displays a collapsible list of options, and allows a user to select one of them.">
  <SelectAnatomy />
</ExampleCard>

</section>

## Collections

<section className={styles.cardGroup}>

<ExampleCard
  url="Menu.html"
  title="Menu"
  description="A menu displays a list of actions or options that a user can choose.">
  <Menu />
</ExampleCard>

<ExampleCard
  url="ListBox.html"
  title="ListBox"
  description="A listbox displays a list of options, and allows a user to select one or more of them.">
  <ListBox />
</ExampleCard>

<ExampleCard
  url="GridList.html"
  title="GridList"
  description="A grid list displays a list of interactive items, with keyboard navigation, row selection, and actions.">
  <ListView />
</ExampleCard>

<ExampleCard
  url="Table.html"
  title="Table"
  description="A table displays data in rows and columns, with row selection and sorting.">
  <Table />
</ExampleCard>

<ExampleCard
  url="Tree.html"
  title="Tree"
  description="A tree displays hierarchical data with selection and collapsing.">
  <Tree />
</ExampleCard>

<ExampleCard
  url="TagGroup.html"
  title="TagGroup"
  description="A tag group displays a list of items, with support for keyboard navigation, selection, and removal.">
  <TagGroup />
</ExampleCard>

</section>

## Date and time

<section className={styles.cardGroup}>

<ExampleCard
  url="DatePicker.html"
  title="DatePicker"
  description="A date picker combines a DateField and a Calendar popover.">
  <DatePicker />
</ExampleCard>

<ExampleCard
  url="DateRangePicker.html"
  title="DateRangePicker"
  description="A date range picker combines two DateFields and a RangeCalendar popover.">
  <DateRangePicker />
</ExampleCard>

<ExampleCard
  url="DateField.html"
  title="DateField"
  description="A date field allows a user to enter and edit date values using a keyboard.">
  <DateField />
</ExampleCard>

<ExampleCard
  url="TimeField.html"
  title="TimeField"
  description="A time field allows a user to enter and edit time values using a keyboard.">
  <TimeField />
</ExampleCard>

<ExampleCard
  url="Calendar.html"
  title="Calendar"
  description="A calendar allows a user to select a single date from a date grid.">
  <Calendar />
</ExampleCard>

<ExampleCard
  url="RangeCalendar.html"
  title="RangeCalendar"
  description="A range calendar allows a user to select a contiguous range of dates.">
  <RangeCalendar />
</ExampleCard>

</section>

## Color

<section className={styles.cardGroup}>

<ExampleCard
  url="ColorPicker.html"
  title="ColorPicker"
  description="A color picker synchronizes a color value between multiple React Aria color components.">
  <ColorPicker />
</ExampleCard>

<ExampleCard
  url="ColorArea.html"
  title="ColorArea"
  description="A color area allows users to adjust two channels of a color value.">
  <ColorArea />
</ExampleCard>

<ExampleCard
  url="ColorSlider.html"
  title="ColorSlider"
  description="A color slider allows users to adjust an individual channel of a color value.">
  <ColorSlider />
</ExampleCard>

<ExampleCard
  url="ColorWheel.html"
  title="ColorWheel"
  description="A color wheel allows users to adjust the hue of a color value on a circular track.">
  <ColorWheel />
</ExampleCard>

<ExampleCard
  url="ColorField.html"
  title="ColorField"
  description="A color field allows users to edit a hex color or individual color channel value.">
  <ColorField />
</ExampleCard>

<ExampleCard
  url="ColorSwatch.html"
  title="ColorSwatch"
  description="A color swatch displays a preview of a selected color.">
  <ColorSwatch />
</ExampleCard>

<ExampleCard
  url="ColorSwatchPicker.html"
  title="ColorSwatchPicker"
  description="A color swatch picker displays a list of color swatches and allows a user to select one of them.">
  <ColorSwatchPicker />
</ExampleCard>

</section>

## Overlays

<section className={styles.cardGroup}>

<ExampleCard
  url="Dialog.html"
  title="Dialog"
  description="A dialog is an overlay shown above other content in an application.">
  <Dialog />
</ExampleCard>

<ExampleCard
  url="Popover.html"
  title="Popover"
  description="A popover displays interactive content in context with a trigger element.">
  <Popover />
</ExampleCard>

<ExampleCard
  url="Tooltip.html"
  title="Tooltip"
  description="A tooltip displays a description of an element on hover or focus.">
  <Tooltip />
</ExampleCard>

</section>

## Forms

<section className={styles.cardGroup}>

<ExampleCard
  url="Checkbox.html"
  title="Checkbox"
  description="A checkbox allows a user to select an individual option.">
  <Checkbox />
</ExampleCard>

<ExampleCard
  url="CheckboxGroup.html"
  title="CheckboxGroup"
  description="A checkbox group allows a user to select one or more items in a list of options.">
  <CheckboxGroup />
</ExampleCard>

<ExampleCard
  url="RadioGroup.html"
  title="RadioGroup"
  description="A radio group allows a user to select a single item from a list of options.">
  <RadioGroup />
</ExampleCard>

<ExampleCard
  url="Switch.html"
  title="Switch"
  description="A switch allows a user to turn a setting on or off.">
  <Switch />
</ExampleCard>

<ExampleCard
  url="TextField.html"
  title="TextField"
  description="A text field allows a user to enter a plain text value with a keyboard.">
  <TextField />
</ExampleCard>

<ExampleCard
  url="SearchField.html"
  title="SearchField"
  description="A search field allows a user to enter and clear a search query.">
  <SearchField />
</ExampleCard>

<ExampleCard
  url="NumberField.html"
  title="NumberField"
  description="A number field allows a user to enter, increment, or decrement a numeric value.">
  <NumberField />
</ExampleCard>

<ExampleCard
  url="Slider.html"
  title="Slider"
  description="A slider allows a user to select one or more values within a range.">
  <Slider />
</ExampleCard>

<ExampleCard
  url="Form.html"
  title="Form"
  description="A form allows users to submit data to a server, with support for validation.">
  <Form />
</ExampleCard>

</section>

## Navigation

<section className={styles.cardGroup}>

<ExampleCard
  url="Tabs.html"
  title="Tabs"
  description="Tabs organize content into multiple sections, and allow a user to view one at a time.">
  <Tabs />
</ExampleCard>

<ExampleCard
  url="Link.html"
  title="Link"
  description="A link allows a user to navigate to another page.">
  <Link />
</ExampleCard>

<ExampleCard
  url="Breadcrumbs.html"
  title="Breadcrumbs"
  description="Breadcrumbs display a hierarchy of links to the current page or resource.">
  <Breadcrumbs />
</ExampleCard>

<ExampleCard
  url="Disclosure.html"
  title="Disclosure"
  description="A disclosure is a collapsible section of content.">
  <Disclosure />
</ExampleCard>

<ExampleCard
  url="DisclosureGroup.html"
  title="DisclosureGroup"
  description="A disclosure group is a grouping of related disclosures, sometimes called an accordion.">
  <DisclosureGroup />
</ExampleCard>

</section>

## Status

<section className={styles.cardGroup}>

<ExampleCard
  url="ProgressBar.html"
  title="ProgressBar"
  description="A progress bar shows progress of an operation over time.">
  <ProgressBar />
</ExampleCard>

<ExampleCard
  url="Meter.html"
  title="Meter"
  description="A meter represents a quantity within a known range, or a fractional value.">
  <Meter />
</ExampleCard>

<ExampleCard
  url="Toast.html"
  title="Toast"
  description="A toast displays a temporary notification of an action, error, or other event.">
  <Toast />
</ExampleCard>

</section>

## Drag and drop

<section className={styles.cardGroup}>

<ExampleCard
  url="DropZone.html"
  title="DropZone"
  description="A drop zone is an area into which one or multiple objects can be dragged and dropped.">
  <DropZone />
</ExampleCard>

</section>

## Interactions

<section className={styles.cardGroup}>

<ExampleCard
  url="usePress.html"
  title="usePress"
  description="Handles press interactions across mouse, touch, keyboard, and screen reader input.">
  <Press />
</ExampleCard>

<ExampleCard
  url="useLongPress.html"
  title="useLongPress"
  description="Handles long press interactions for mouse and touch devices.">
  <LongPress />
</ExampleCard>

<ExampleCard
  url="useHover.html"
  title="useHover"
  description="Handles mouse hover interactions, ignoring touch emulation.">
  <Hover />
</ExampleCard>

<ExampleCard
  url="useMove.html"
  title="useMove"
  description="Handles move interactions, including mouse and touch drag gestures, and arrow key equivalents.">
  <Move />
</ExampleCard>

<ExampleCard
  url="useKeyboard.html"
  title="useKeyboard"
  description="Handles keyboard interactions for a focusable element.">
  <Keyboard />
</ExampleCard>

<ExampleCard
  url="useFocus.html"
  title="useFocus"
  description="Handles focus interactions for an element, ignoring its descendants.">
  <Focus />
</ExampleCard>

<ExampleCard
  url="useFocusWithin.html"
  title="useFocusWithin"
  description="Handles focus interactions for an element and its descendants.">
  <FocusWithin />
</ExampleCard>

<ExampleCard
  url="useFocusRing.html"
  title="useFocusRing"
  description="A focus ring is an indication of the active element when interacting with a keyboard.">
  <FocusRing />
</ExampleCard>

<ExampleCard
  url="FocusScope.html"
  title="FocusScope"
  description="A focus scope contains, restores, and manages focus for its descendant elements.">
  <FocusScope />
</ExampleCard>

</section>
